<script setup name="SearchBar">
import { computed, watch } from 'vue'
import { deepClone } from '@/util'
import { isUndefined } from 'lodash-es'

const props = defineProps({
  showMore: {
    type: Boolean,
    default: false
  },
  fields: {
    type: Object
  },
  defaultForm: {
    type: Object,
    default() {
      return {}
    }
  },
  unfold: {
    type: Boolean,
    default: false
  },
  formSchema: {
    type: Array,
    default() {
      return []
    }
  }
})

const emit = defineEmits(['toggle', 'confirm', 'update:fields'])
const setSchemaFormRef = ref(null)

const isUnfold = ref(!props.unfold)

const selectorOption = computed(() => {
  const temp = deepClone(props.formSchema).map(item => {
    item.props.labelWidth = item.props.labelWidth || '70px'
    if (!isUndefined(item.hidden)) {
      item.hidden = !isUnfold.value
    }
    return item
  })

  return [
    ...temp,
    {
      field: 'action',
      type: 'slot',
      slotName: 'action',
      props: { label: '', labelWidth: '0px' },
      // layout: { span: !props.showMore ? 8 : isUnfold.value ? 24 : 8 },
      layout: { xs: 24, sm: 12, md: 8, xl: 6 }
    }
  ]
})

const filterSlot = computed(() => {
  return props.formSchema.filter(item => item.type === 'slot')
})

watch(() => props.unfold, () => {
  toggle()
}, { immediate: true })

function toggle() {
  isUnfold.value = !isUnfold.value
  emit('toggle', isUnfold.value)
}

const search = () => {
  emit('confirm', { type: 'confirm', data: props.fields })
}

const clear = () => {
  emit('update:fields', deepClone(props.defaultForm))
  setTimeout(() => {
    emit('confirm', { type: 'reset', data: props.fields })
  }, 100)
}

defineExpose({
  search,
  clear
})
</script>

<template>
  <div class="search-container">
    <SchemaForm
      ref="setSchemaFormRef"
      :fields="fields"
      :form-schema="selectorOption"
    >
      <template v-for="item in filterSlot" :key="item.slotName" #[item.slotName]>
        <slot :name="item.slotName" />
      </template>
      <template #action>
        <!--    :class="{'flex-end': isUnfold && showMore}"     -->
        <div class="w100" style="font-size: 0;">
          <el-button type="primary" :auto-insert-space="false" @click="search">搜索</el-button>
          <el-button :auto-insert-space="false" cancel @click="clear">清空</el-button>
          <el-button v-if="showMore" type="primary" text :auto-insert-space="false" @click="toggle">
            {{ isUnfold ? '收起' : '展开' }}
            <el-icon class="font14">
              <svg-icon class="ml4" :name="isUnfold ? 'ep:arrow-up' : 'ep:arrow-down'" />
            </el-icon>
          </el-button>
        </div>
      </template>
    </SchemaForm>
  </div>
</template>

<style lang="scss" scoped>
.search-container {
  position: relative;
  margin: 10px 0 0;
  padding: 13px 20px 0;
  background-color: #fff;
  &:first-child {
    margin-top: 0;
  }
  :deep(.el-form) {
    .el-select {
      width: 100%;
    }
    .el-date-editor {
      width: 100%;
    }
  }
  &:deep(.el-form-item) {
    margin-bottom: 13px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
